<template>
    <header class="ui-header">
        <template v-if="status == 0">
            <div :class="['tag-timer',canPayTime>0 ?'yellow':'timeout'] ">
                <span v-if="canPayTime<=0">支付超时</span>
                <span v-else>{{canPayTime | timeFormat '等待支付 - 剩余mm分ss秒'}}</span>
            </div>
        </template>
        <template v-else>
            <div class="success">已支付</div>
        </template>
    </header>

    <div class="header-holder"></div>

    <div v-if="skus" class="ui-box">
        <div class="ui-bar order-id">
            <span>订单号</span>
            <b>{{order_id}}</b>
        </div>
        <template v-if="status != 0">
            <div v-for="val of children" class="child-order">
                <div class="bar-status child-order-status">
                    <div style="display: inline;font-size: 12px"><span style="color: #888">商家</span><span
                            style="margin-left:10px;color: #111">{{val.supplier.name}}</span></div>
                    <div class="ui-c-f frame-status">
                        <span class="label-status">{{getStatusStr(val.status)}}</span>
                    </div>
                </div>
                <div class="child-order-product-list">
                    <div v-for="val of val.skus" class="product">

                        <img :src="val.pic+'?imageView2/2/w/200'">

                        <div class="tumb-top ui-c-f">
                            <div class="thum-price">
                                <div class="ui-price price-red">{{val.price/10}}</div>
                                <div v-if="val.price_cost" class="ui-price price-gray">{{val.price_cost/10}}</div>
                            </div>
                            <h1>
                                {{val.title}}
                            </h1>
                        </div>
                        <div class="quantity">{{val.quantity}}</div>
                    </div>

                </div>
                <div v-if="val.status >= 30"
                     style="line-height: 36px;height: 36px;border-top: solid 1px #f0f0f0;color: #888;font-size: 12px">
                    <div class="ui-more" style="padding: 0 8px"><span>查看物流</span></div>
                </div>
            </div>
        </template>
        <!-- 状态未支付时使用 -->
        <div class="product-list" v-else>
            <div v-for="val of skus" class="product">
                <img :src="val.pic+'?imageView2/2/w/200'">

                <div class="tumb-top ui-c-f">
                    <div class="thum-price">
                        <div class="ui-price price-red">{{val.price/10}}</div>
                        <div v-if="val.price_cost" class="ui-price price-gray">{{val.price_cost/10}}</div>
                    </div>
                    <h1>
                        {{val.title}}
                    </h1>
                </div>
                <div class="quantity">{{val.quantity}}</div>
            </div>
        </div>
    </div>

    <div class="ui-box">
        <div class="ui-bar ui-v-a">
            优惠券
            <div class="float-right coupon">
                {{coupon&&coupon._id?couponTitle:'未使用'}}
            </div>
        </div>
    </div>


    <div class="ui-box">
        <div class="ui-bar ui-v-a">
            商品总价
            <div class="float-right">
                <div class="ui-price">{{amount/10}}</div>
            </div>
        </div>

        <template v-if="postage">
            <div class="ui-bar ui-v-a">
                邮费
                <span v-if="postage.man>needPay" class="lack">(还差<b>{{(postage.man-needPay)/10}}元</b>包邮)</span>
                <span class="lack" v-else><b>(已包邮)</b></span>

                <div class="float-right">
                    <div class="ui-price">{{postage.cost/10}}</div>
                </div>
            </div>

        </template>
        <div class="ui-bar ui-v-a">
            为您节省
            <div class="float-right">
                <div class="ui-price">{{discount/10}}</div>
            </div>
        </div>
    </div>

    <div v-if="address" class="address ui-box ui-c-f">
        <h1>{{address.receiver_name}}</h1>

        <h2>{{address.phone}}</h2>

        <p>{{address.city|parseCity}} {{address.place}}</p>
    </div>


    <div v-if="remark" class="remark ui-box">
        备注: {{remark}}
    </div>


    <cashier v-show="pay" :bill_id="bill_id" :order_id="order_id" @finish="getData" @start="pay=false"
             @success="success"></cashier>


    <div class="ui-page-holder"></div>

    <footer class="ui-v-a">
        <div class="ui-v-a label-amount"><span>金额:</span><span class="ui-price amount">{{needPay/10}}</span></div>

        <button v-if="status ==0 && !cancel &&canPayTime>0" class="btn-pay" @click="clickfb"><span>付款</span></button>
    </footer>

</template>

<script type="text/babel">
    import http from '../libs/http'
    import cashier from './cashier.vue'

    var payTimer;

    export default{
        components: {
            cashier: cashier
        },
        data(){
            return {
                address: null,
                skus: [],
                coupon: null,
                amount: 0,
                needPay: 0,
                postage: {},
                discount: 0,
                remark: '',
                pay: false,
                bill_id: '',
                order_id: '',
                status: 0,
                children: [],
                canPayTime: 0
            };
        },
        attached: function () {

            this.getData();
        },

        computed: {
            couponTitle: function () {
                if (this.coupon) {
                    var title = '';
                    if (this.coupon.info.range_type == 0)
                        title = '全场通用';
                    else {
                        this.coupon.info.range.forEach(function (range) {
                            title += range.name;
                        });

                        title += '专用';
                    }

                    if (this.coupon.info._type == 0)
                        title += this.coupon.info.zk / 10 + '折最高抵' + this.coupon.info.minus / 10;
                    else if (this.coupon.info.man > 0)
                        title += '满' + this.coupon.info.man + '抵' + this.coupon.info.minus / 10;
                    else
                        title += '抵' + this.coupon.info.minus / 10;

                    return title;
                } else
                    return '无';
            }
        },

        detached: function () {
            if (payTimer)
                clearInterval(payTimer);
        },

        methods: {
            clickfb: function () {
                var self = this;

                self.pay = true;
            },

            getStatusStr: function (status) {
                if (status == '0')
                    return "待支付";
                if ('10' <= status && status < '30')
                    return "待发货";
                if (status >= '30')
                    return "已发货";
                if (status == '9')
                    return "支付超时";
                if (status == '100')
                    return "已完成";
                if (status % 10 == 9)
                    return "已取消";

                return "未知状态,请联系客服";
            },

            getData: function () {
                var self = this;

                self.order_id = this.$route.params.order_id;

                http.get({
                    url: api + 'user/order_detail',
                    jsonp: true,
                    data: {_id: self.order_id}
                }).then(function (obj) {
                    if (obj.code == 0) {
                        var data = obj.data;

                        self.bill_id = data.bill_id;
                        self.discount = data.amount + data.postage.cost - data.needPay;

                        self.needPay = data.needPay;
                        self.address = data.address || null;
                        self.skus = data.skus;
                        self.coupon = data.coupon || null;
                        self.status = data.status;
                        self.amount = data.amount;
                        self.canPayTime = data.canPayTime;
                        self.children = data.children;
                        self.remark = data.remark;
                        self.postage = data.postage;

                        if (self.status == 0 && self.canPayTime > 0) {
                            payTimer = setInterval(function () {
                                if (self.canPayTime > 0)
                                    self.canPayTime -= 1000;
                                else
                                    clearInterval(payTimer);
                            }, 1000);
                        }
                    }
                });
            },

            success: function () {
                //清除购物车数
                db.set('cart_count', db.get('cart_count') - this.skus.length);
            }
        }
    }
</script>

<style scoped>

    header {
        line-height: 36px;
        text-align: center;
        font-size: 12px;
        color: #888;
    }

    .ui-header.ui-box {
        margin-top: 0;
    }

    .ui-header {
        background-color: #fff;
    }

    .tag-timer.timeout {
        background-color: #eee;
        border-bottom: 1px solid rgb(240, 240, 240);
    }

    .tag-timer.yellow {
        background-color: #f2df53;
        color: #111;
    }

    .success {
        background-color: #AAFB96;
        color: #000;
    }

    .header-holder {
        height: 36px;
    }

    .amount {
        color: #f2df53;

        font-size: 14px;
    }

    .label-amount {
        color: #dcdcdc;
        font-size: 12px;
        display: inline;
        margin-left: 10px;
    }

    .address {
        height: 90px;
        padding: 12px 8px 0 8px;
    }

    .address h1 {
        display: inline-block;
        font-size: 16px;
        font-weight: lighter;
        padding: 8px 0;
    }

    .address h2 {
        display: inline-block;
        font-size: 12px;
        font-weight: lighter;
    }

    .address h2::after {
        content: '';
        display: block;
    }

    .address p {
        font-size: 12px;
        color: #888888;
        margin-right: 60px;
        max-height: 3em;
        line-height: 1.5em;
    }

    .product {
        width: 100%;
        height: 100px;
        padding: 8px 0;
        border-top: solid 1px #f0f0f0;
    }

    .product h1 {
        font-size: 13px;
        font-weight: lighter;
        width: 210px;
        margin-top: 8px;
        margin-left: 8px;
        float: left;
    }

    .product > img {
        margin-left: 8px;
        display: block;
        float: left;
        width: 100px;
        height: 100px;
    }

    .tumb-top {
        height: 70px;
    }

    .thum-price {
        position: relative;
        float: right;
        margin-right: 8px;
        margin-top: 8px;
        text-align: right;
    }

    .price-red {
        color: #ff0000;
        font-size: 14px;
        font-weight: normal;
    }

    .price-gray {
        color: #888888;
        text-decoration: line-through;
        font-size: 11px;
    }

    .quantity {
        color: #888888;
        float: right;
        margin-right: 8px;
        font-size: 12px;
    }

    .quantity::before {
        content: 'x';
        display: inline-block;
    }

    .float-right {
        height: 100%;
        float: right;
    }

    .coupon {
        color: #888888;
    }

    .ui-bar {
        font-size: 14px;
    }

    .ui-bar:last-child {
        border-bottom: none;
    }

    .btn-pay {
        margin: 5px;
        width: 98px;
        height: 34px;
        float: right;
        background-color: #f9e043;
    }

    .child-order {
        padding-left: 15px;
        border-top: solid 1px #f0f0f0;
    }

    .child-order-status {
        height: 36px;
        line-height: 36px
    }

    .frame-status {
        float: right;
        margin-right: 10px;
    }

    .order-id {
        height: 36px;
        line-height: 36px;
    }

    .order-id > span {
        font-size: 12px;
        color: #888888;
    }

    .order-id > b {
        font-size: 12px;
        font-weight: lighter;
    }

    .label-status {
        font-size: 13px;
        color: #111;
    }

    .supplier-product-list .product > img {
        margin-left: 0;
    }

    .child-order {
        padding-left: 15px;
        border-top: solid 1px #f0f0f0;
    }

    .float-right .ui-price {
        color: red;
    }

    .lack {
        font-size: 12px;
    }

    .lack b {
        color: red;
        font-weight: normal;
    }

    .remark {
        color: #888;
        padding: 12px 8px;

        font-size: 12px;
    }
</style>